<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容管理页</title>
    <link rel="stylesheet" href="/css/element.css">
    <script src="/js/vue2.6.js"></script>
    <script src="/js/element.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/app.js"></script>
    <script src="/editor/js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="4">首页</el-menu-item>
<!--        <el-submenu index="2">-->
<!--            <template slot="title">我的工作台</template>-->
<!--            <el-menu-item index="2-1">选项1</el-menu-item>-->
<!--            <el-menu-item index="2-2">选项2</el-menu-item>-->
<!--            <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--            <el-submenu index="2-4">-->
<!--                <template slot="title">选项4</template>-->
<!--                <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--                <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--                <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--            </el-submenu>-->
<!--        </el-submenu>-->
        <el-menu-item index="3" ><a @click="locationfref('/page/add.html')">新建内容</a></el-menu-item>
        <el-menu-item index="1"><a @click="locationfref('/page/update.html')">内容管理</a></el-menu-item>
    </el-menu>



    <div align="center">
        <div style="width: 500px">
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容"  class="input-with-select">
                    <el-button slot="append"  icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <br>
        <div style="padding: 20px">
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        height="600">
                    <el-table-column
                            label="序号"
                            width="150px">
                        <template slot-scope="scope">{{ scope.$index+1 }}</template>
                    </el-table-column>
                    <el-table-column
                            label="标题"
                            width="450px">
                        <template slot-scope="scope" ><a @click="locationppreview(scope.row.id)">{{ scope.row.title }}</a></template>
                    </el-table-column>
                    <el-table-column
                            prop="tag"
                            label="标签"
                            width="250px">
                    </el-table-column>
                    <el-table-column
                            prop="viewnum"
                            label="点击次数"
                            width="250px">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="250px">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="200">
                        <template slot-scope="scope">
                            <el-button @click="updateNote(scope.row.id)" type="text" size="small">编辑</el-button>
                            <el-button type="text" @click="deleteNote(scope.row.id)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </template>
        </div>


    </div>
    <br>
</div>
<script>
    var Main = {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                total:0,
                tableData: [],
                search:'',
            }
        },
        created(){
            api.GET('/note/page',{'page':1,'size':10},(result)=> {
                this.tableData=result.data.records;
                this.total=result.data.total;
            })
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCurrentChange(val) {
                api.GET('/note/page',{'page':val,'size':10},(result)=> {
                    this.tableData=result.data.records;
                })
            },
            locationfref(href){
                window.open(href);
            },
            locationppreview(id){
                window.open('/page/contentinfo.html?obj='+id)
            },
            updateNote(id){
                window.open('/page/update.html?obj='+id)
            },
            deleteNote(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.GET('/note/delete',{'id':id},(result)=> {
                        if(result.code==0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                          local.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>